<template>
  <div class="flex-a">
    <el-popover
      v-if="change_font"
      placement="bottom"
      width="90"
      trigger="click">
      <div class="p-4-11"
           :style="index != font_list.length-1?'border-bottom: 1px solid rgba(0,0,0,0.04);':''"
           v-for="(item,index) in font_list" :key="index">
        <div class="text-name">{{ item.name }}</div>
        <div class="flex-a ju-a">
            <span @click="handleChangeFont(index, index_child)"
                  :style="item_child.is_action?'background-color: rgba(239,239,243,1);':''"
                  class="popover-child" v-for="(item_child,index_child) in item.family" :key="index_child">
              {{ item_child.text }}
            </span>
        </div>
      </div>
      <div slot="reference"
           class="wen-img flex-a">
        <svg-icon class="f-s-20"  style="color: #1966E2" class-name="m-r-7" icon-class="appraisewenzi"/>
      </div>
    </el-popover>
    <el-tooltip  class="" effect="light" content="对比" placement="bottom">
      <div v-if="is_compare && is_text"  @click="handleCompare"
           style="margin-right: 20px"
           class="flex-a cursor-p export-text">
        <svg-icon class="f-s-24"
                  style="margin-right: 4px;color: #1966E2" class-name="m-r-7" icon-class="appraisecompare"/>
      </div>
    </el-tooltip>
    <el-tooltip  class="" effect="light" content="日记录" placement="bottom">
      <div v-if="is_diary && is_text"  @click="handleOpenDiary"
           style="margin-right: 20px"
           class="flex-a cursor-p export-text">
        <svg-icon class="f-s-24"
                  style="margin-right: 4px;" class-name="m-r-7" icon-class="appraisediary"/>
      </div>
    </el-tooltip>
    <el-tooltip  class="" effect="light" content="周计划" placement="bottom">
      <div v-if="is_documentary && is_text"  @click="handleOpenWeek"
           style="margin-right: 20px"
           class="flex-a cursor-p export-text">
        <svg-icon class="f-s-24"
                  style="margin-right: 4px;" class-name="m-r-7" icon-class="appraiseweek"/>
      </div>
    </el-tooltip>
    <el-tooltip  class="" effect="light" content="周纪实" placement="bottom">
      <div v-if="is_week && is_text"  @click="OpenWeekPlan"
           style="margin-right: 20px"
           class="flex-a cursor-p export-text">
        <svg-icon class="f-s-24"
                  style="margin-right: 4px;" class-name="m-r-7" icon-class="appraisedocumentary"/>
      </div>
    </el-tooltip>
    <div v-if="is_text && !personal_eit"  @click="handleExport"
         :class="is_loading?'loading-action':'loading'"
         class="flex-a cursor-p export-text">
      <svg-icon class="f-s-20"  :style="is_loading?'color: #666666;':'color: #1966E2'"
                style="margin-right: 4px;" class-name="m-r-7" icon-class="appraiseout"/>
      <span class="f-s-20">导出</span>
    </div>
    <div class="flex-a m-l-40" v-if="not_clickable">
      <svg-icon class="review-img f-s-20"  style="color: #1966E2;" class-name="m-r-7 m-t-4" icon-class="appraiseshenhe"/>
      <span @click="handleReview" class="f-s-20 review">{{ text }}</span>
    </div>
  </div>
</template>

<script>
import { fileDownload } from '@/utils/httpRequet'

export default {
  name: 'HeaderFeatures',
  props: {
    text: {
      type: String,
      default: ''
    },
    router_type: {
      type: String,
      default: 'duty'
    },
    id: {
      type: String,
      default: ''
    },
    record_date: {
      type: String,
      default: ''
    },
    year: {
      type: String,
      default: ''
    },
    font_size: {
      type: Number,
      default: 1
    },
    type_num: {
      type: Number,
      default: 0
    },
    is_text: {
      type: Boolean,
      default: false
    },
    change_font: {
      type: Boolean,
      default: false
    },
    personal_eit: {
      type: Boolean,
      default: false
    }, //是否能编辑
    not_clickable: {
      type: Boolean,
      default: false
    },//不可点击
    is_diary: {
      type: Boolean,
      default: false
    }, //日记录
    is_week: {
      type: Boolean,
      default: false
    }, //周计划
    is_documentary: {
      type: Boolean,
      default: false
    },//周纪实
    is_compare: {
      type: Boolean,
      default: false
    }, //对比
  },
  watch: {

  },
  data() {
    return {
      is_loading: false,
      font_list: [{
        name: '字体',
        family: [
          {text: '宋体', is_action: false},
          {text: '雅黑', is_action: true},
          {text: '黑体', is_action: false}
        ]
      }, {
        name: '大小',
        family: [
          {text: '大', is_action: false},
          {text: '中', is_action: true},
          {text: '小', is_action: false}
        ]
      }],
    }
  },
  mounted() {

  },
  methods: {
    /**
     * @name 字体更改
     * @param index1 父级对象
     * @param index2 子级对象
     */
    handleChangeFont(index1, index2) {
      this.font_list[index1].family.forEach(res => res.is_action = false)
      this.font_list[index1].family[index2].is_action = true
      let e = {index1, index2, type : this.type_num}
      this.$emit('handleChangeFontSize', e)
    },
    /**
     * @name 功能按钮
     */
    handleReview() {
      if(!this.personal_eit) {
        this.$message({
          message: '您不能编辑',
          type: 'warning',
          duration: 2000,
          center: true
        })
        return
      }
      if(this.personal_eit && this.text === '提交审核') {
        this.$emit('handleReview')
      }else{
        this.$emit('handleDepartment',this.type_num)
      }
    },
    /**
     * @name 对比
     */
    handleCompare() {
      this.$emit('handleCompare')
    },
    /**
     * @name 打开日小结
     */
    handleOpenDiary() {
      this.$emit('handleOpenDiary')
    },
    /**打开周计划
     */
    handleOpenWeek() {
      this.$emit('handleOpenWeek')
    },
    /**打开周纪实
     */
    OpenWeekPlan() {
      this.$emit('OpenWeekPlan')
    },
    /**  导出
     */
    handleExport() {
      if(!this.is_loading) {
        this.is_loading = true
        if(this.router_type === 'plan') {
          if(this.type_num === 0) {
            fileDownload("planUserExpFile",{
              param:{ planId: this.id }
            })
          }else{
            fileDownload("planDeptExpFile",{
              param:{ planId: this.id }
            })
          }
        }else if(this.router_type === 'duty'){
          if(this.type_num === 0) {
            fileDownload("dutyUserExpFile",{
              param:{ dutyId: this.id }
            })
          }else{
            fileDownload("dutyDeptExpFile",{
              param:{ deptId: this.id, year: this.year }
            })
          }
        }else if(this.router_type === 'record'){
          if(this.type_num === 0) {
            fileDownload("expContent",{
              param:{ userId: this.id,recordDate: this.record_date }
            })
          }else if(this.type_num === 1) {
            fileDownload("weekExpContent",{
              param:{ recordWeekId: this.id }
            })
          }
          else{
            fileDownload("monthExpContent",{
              param:{ recordMonthId:this.id }
            })
          }
        }
        setTimeout(()=> {
          this.is_loading = false
        },2000)
      }
    },
  }
}
</script>

<style scoped>
.flex-a {
  display: flex;
  align-items: center;
}
.ju-a {
  justify-content: space-around;
}
.m-l-40{
  margin-left: 20px;
}
.cursor-p {
  cursor: pointer;
}
.export-text {
  height: 40px;
}
.popover-child {
  font-size: 12px;
  padding: 0.05rem 0.1rem;
  color: rgba(153, 153, 153, 1);
  cursor: pointer;
}
.p-4-11 {
  padding: 0.2rem 0 0.55rem 0;
}
.wen-img {
  width: 22px;
  height: 22px;
  margin-right: 20px;
  cursor: pointer;
}
.m-t-4 {
  margin-top: 4px;
}
.text-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(102,102,102,1);
  margin-bottom: 0.2rem
}
.f-s-20 {
  font-size: 18px;
}
.review {
  color: rgba(25,102,226,1);
  cursor: pointer;
}
.review-img {
  margin-right: 0.25rem;
}
.loading-action {
  background: #ebe9e9;
  color: #666666;
  border: 1px solid #eeeeee;
  border-radius: 0.2rem;
}
.loading {
  color: #1966E2;
}
.f-s-24 {
  font-size: 21px;
}
@media (max-width: 1024px) {

  .text-name {
    font-size: 14px;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 0.2rem
  }
  .f-s-24 {
    font-size: 19px;
  }
  .f-s-20 {
    font-size: 16px;
  }

  .wen-img {
    width: 20px;
    height: 20px;
    margin-right: 20px;

  }
  .m-t-4 {
    margin-top: 2px;
  }
}
</style>
